import React, { useState }from 'react'
import axios from  "axios"
import PubSub from "pubsub-js"


export default function Header() {
  const [search,setSearch]=useState([])


  const changehandle=(e)=>{
    // 表达一改变就重新替换掉初始值  列表渲染 ,需要重新渲染 把变量放在状态中
    setSearch(e.target.value)
  }

  const clickHandle=async ()=>{
     const result=  await axios.get(" https://api.github.com/search/users?q="+search)  

    PubSub.publish('Github',result)
  }

  return (
    <section className="jumbotron">
    <h3 className="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" value={search} onChange={changehandle} placeholder="enter the name you search"/>
      &nbsp;
      <button onClick={clickHandle} >Search</button>
    </div>
  </section>
  )
}
